@use '@scss/common' as *;

.formContent {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.newItemRow {
  display: flex;
  gap: 1rem;
  align-items: center;

  .trashButton {
    all: unset;
    position: relative;
    bottom: 14px;
    align-self: flex-end;
    display: flex;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--color-error-550);

    &:hover,
    &:focus {
      background-color: var(--theme-error-100);
    }
  }
}

.newVariableInputs {
  width: 100%;
  display: flex;
  gap: inherit;
  flex-wrap: wrap;
}

.newEnvInput {
  width: 100%;
  align-self: flex-end;
  flex: 1;

  @include small-break {
    flex: unset;
  }
}

.actionFooter {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-border-color);
}

.addAnotherButtonWrap {
  display: inline-flex;
}

.addAnotherButton {
  margin-top: 0.75rem;
  padding: 0;
  color: var(--theme-elevation-850);

  > div {
    flex-direction: row-reverse;
  }
}
